<template>
<div class="home-container">
    <el-container>
        <el-header>
		<div>
            <img src="../assets/xatu.png"/>
            <span>学生管理系统</span>
		</div>
        <el-dropdown>
        <span class="el-dropdown-link"><img src="../assets/header.png"/>你好,{{user.studentname}}
        <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus" @click.native="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
        </el-dropdown>
        </el-header>
        <el-container>
        <el-aside>
			<!-- 导航菜单 -->
			<el-menu
                class="el-menu-vertical-demo"
                background-color="#333744"
                text-color="#fff"
                active-text-color="#ffd04b">
			<el-menu-item index="1" @click="goUsercenter()">
                <i class="el-icon-menu"></i>
                <span slot="title" >个人中心</span>
            </el-menu-item>
            <el-menu-item index="2" @click="goStudycenter">
                <i class="el-icon-menu"></i>
                <span slot="title">学习中心</span>
            </el-menu-item>
            </el-menu>
		</el-aside>
        <el-main>
			<router-view></router-view>
		</el-main>
        </el-container>
    </el-container>
</div>
</template>

<script>
    import axios from 'axios';
    import {mapState} from 'vuex';
    export default {
        name:'StudentHome',
        computed:{
            ...mapState('userOptions',['user']),
        },
        methods: {
            
            goUsercenter(){
                console.log('点击了个人中心',this.user)
                this.$router.push({
                    name:'studentusercenter',
                })
            },
            goStudycenter(){
                console.log('点击了学习中心')
                axios.post('http://localhost:5000/SchoolManageSys_war_exploded/user/showClass.do',{
                classid:this.user.classid
        }).then(
            response => {
                console.log('请求课程成功',response.data)
                this.$store.commit('userOptions/SHOWCLASS',response.data)
                this.$router.push({
                    name:'studentclasscenter',
                })
            },
            error =>{
                console.log('请求课程失败',error.message)
            }
        )
            },
            logout(){
                console.log('我点击了登出按钮')
                
                this.$alert('您确定要退出登录吗', '登出', {
                    confirmButtonText: '确定',
                    callback:() =>{
                        window.sessionStorage.removeItem('token')
                        this.$router.go(0)
                    }
                });
            }
        },
        
    }
</script>

<style>
	.home-container{
		height: 100%;
		background: #c4c4c4;
	}
	.el-container{
		height: 100%;
	}
	.el-header{
		background: #333744;
		display: flex;
		justify-content: space-between;
		color: #fff;
		font-size: 20px;
	}
	.el-header img {
		vertical-align: middle;
		width: 244px;
		height: 60px;
        padding-left: 10px;
	}
    .el-aside{
		background: #333744;
		height: 100%;
		box-sizing: border-box;
	}
	.el-main{
		background: rgb(204, 204, 204);
	}
    .el-menu {
        border: none;
        border-right-width: 0;
      }


    .el-dropdown-link {
        cursor: pointer;
        color: #fcfcfc;
        font-size: 20px
  }
  .el-icon-arrow-down {
    font-size: 15px;
  }

</style>